#createCourse {
  @include flexbox();
  @include flex-direction(column);
  height: 100%;
  background: rgba(246, 246, 246, 1);
  font-size: 15px;
  z-index: 1;

  .datetime {
    position: fixed;
    left: 0;
    bottom: -235px;
    width: 100%;
    height: 235px;
    background: #fff;
    z-index: 2;

    &.up {
      animation: up .6s;
      -moz-animation: up .6s;
      /* Firefox */
      -webkit-animation: up .6s;
      /* Safari and Chrome */
      -o-animation: up .6s;
      /* Opera */
      bottom: 0;
    }

    &.down {
      animation: down .6s;
      -moz-animation: down .6s;
      /* Firefox */
      -webkit-animation: down .6s;
      /* Safari and Chrome */
      -o-animation: down .6s;
      /* Opera */
      bottom: -235px;
    }

    div.top {
      @include flexbox();
      height: 45px;
      line-height: 45px;
      background: linear-gradient(to bottom, #7ad8ad,  #67b296);
      padding: 0 25px;

      a {
        @include flex();
        font-size: 17px;
        color: #fff;

        &:last-child {
          text-align: right;
        }
      }
    }
  }

  @keyframes up {
    0% {
      bottom: -235px;
    }

    100% {
      bottom: 0rem;
    }
  }

  @keyframes down {
    0% {
      bottom: 0rem;
    }

    100% {
      bottom: -235px;
    }
  }

  .mc {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, .6);
  }

  header {
    @include flexbox();
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: linear-gradient(to right, #2fd4ac, #2fd492);

    i {
      width: 30px;
      background: url(image/icon_return.png) no-repeat center;
      background-size: 100%;
    }

    div {
      @include flex();
      margin-right: 30px;
      text-align: center;
      font-size: 18px;
    }
  }

  .border-8 {
    width: 100%;
    height: 8px;
    background: #F6F6F6;
  }

  .nav {
    @include flexbox();
    height: 49px;
    line-height: 49px;
    background: #fff;
    border-bottom: 1px solid rgb(229, 229, 229);

    div {
      @include flex();
      text-align: center;

      a {
        display: block;
        margin: auto;
        width: 60%;
        height: 48px;
        font-size: 16px;
        color: rgba(51, 51, 51, 1);

        b {
          font-weight: normal;
        }
      }
    }

    div.active {
      a {
        color: rgb(299, 50, 45);
        border-bottom: 2px solid rgb(229, 50, 45);
      }

    }
  }

  .swipe {
    @include flex();
    width: 100%;
    overflow-y: scroll;

    ul.single {
      width: 100%;

      li {
        background: #fff;

        &.no-border a {
          border: none
        }

        &:last-child {
          background: #F6F6F6;
        }

        &:nth-of-type(2) {
          a {
            div {
              margin-left: 5px;

              &:nth-of-type(1) {
                margin-right: 27px;
              }
            }
          }
        }

        &>a {
          margin: 0 15px;
          padding: 14px 0;
          line-height: 26px;
          border-bottom: 1px solid rgba(223, 223, 223, 1);
          @include flexbox();

          &.liveType {
            @include flexbox();
            padding: 0 50px;

            label {
              @include flex();
              @include flexbox();

              input[type='radio'] {
                opacity: 0;
                position: absolute;
              }
              input[value='free']:checked+i,input[value='charge']:checked+i,input[value='charge']+i,input[value='free']+i{
                display: inline-block;
                margin: auto;
                width: 50px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                border-radius: 50%;
              }
              input[value='free']:checked+i,input[value='charge']:checked+i{
                background: #2eda97;
              }

              input[value='charge']+i,input[value='free']+i{
                background: rgba($color: #000000, $alpha: 0.3);
              }

            }
          }

          .red {
            color: #2eda97;
            margin-left: 8px;
          }

          &.liveType input[type='text'] {
            border: 1px solid rgba(156, 156, 156, 1);
            width: 154px;
            height: 35px;
            line-height: 35px;
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
            margin: 20px auto;
            text-align: center;
            border-radius: 6px;
          }

          .time {
            color: rgba(156, 156, 156, 1);
            padding-left: 5px;
          }

          &.courseContent {
            height: 80px;
            padding-top: 0px;

            input[type=text] {
              width: 100%;
              height: 35px;
              padding: 10px 0;
            }
          }

          &.descTitle {
            height: 50px;
          }

          &.courseDesc {
            height: 120px;
            padding-top: 0px;

            textarea {
              width: 100%;
              resize: none;
              padding: 10px 0;
              border: none;
            }
          }

          &.type {
            @include flexbox();

            label {
              @include flex();
              @include flexbox();

              input[type='radio'] {
                opacity: 0;
                position: absolute;
              }

              input[type='radio']+i {
                display: inline-block;
                margin: auto 0;
                width: 15px;
                height: 19px;
                background: url(image/icon_agree_normal.png) no-repeat center;
                background-size: 15px;
              }

              input[type='radio']:checked+i {
                background: url(image/icon_agree_click.png) no-repeat center;
                background-size: 15px;
              }

              span {
                margin-top: 1px;
                margin-left: 6px;
              }
            }
          }

          &.nextStep {
            display: block;
            width: 194px;
            height: 35px;
            color: #fff;
            padding: 0;
            text-align: center;
            margin: 45px auto;
            border-radius: 20px;
            line-height: 35px;
            background: linear-gradient(to bottom, #2fd4ac, #2fd492);
          }

          label {
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
          }

          input[type=text] {
            border: none;
            padding-left: 5px;
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
          }

          input::-webkit-input-placeholder {
            color: rgba(156, 156, 156, 1);
            font-size: 15px;
          }

          input:-moz-placeholder {
            font-size: 15px;
            color: rgba(156, 156, 156, 1);
          }

          &.uploadImg {
            @include justify-content(space-between);
            padding-right: 9px;

            img {
              width: 50px !important;
              height: 50px !important;
            }

            .img {
              position: relative;
              width: 50px;
              height: 50px;

              img.delIcon {
                position: absolute;
                right: -8px;
                top: -8px;
                width: 16px !important;
                height: 16px !important;
              }

            }

            .upfileDiv {

              position: relative;

              input[type=file] {
                position: absolute;
                opacity: 0;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

              }

              i.avatar-uploader-icon {
                display: inline-block;
                background: url(image/add_images.png);
                width: 50px;
                height: 50px;
                background-size: 50px;
              }
            }
          }

          span {
            i {
              color: rgba(156, 156, 156, 1);
            }
          }


        }
      }
    }

    ul.series {
      width: 100%;

      li {
        background: #fff;

        &.no-border a {
          border: none
        }

        &:last-child {
          background: #F6F6F6;
        }

        &:nth-of-type(2) {
          a {
            div {
              margin-left: 5px;

              &:nth-of-type(1) {
                margin-right: 27px;
              }
            }
          }
        }

        &>a {
          margin: 0 15px;
          padding: 14px 0;
          line-height: 26px;
          font-size: 15px;
          border-bottom: 1px solid rgba(223, 223, 223, 1);
          @include flexbox();

          &.liveType {
            @include flexbox();
            padding: 0 50px;

            label {
              @include flex();
              @include flexbox();

              input[type='radio'] {
                opacity: 0;
                position: absolute;
              }


              input[value='free']:checked+i,input[value='charge']:checked+i,input[value='charge']+i,input[value='free']+i{
                display: inline-block;
                margin: auto;
                width: 50px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                border-radius: 50%;
              }
              input[value='free']:checked+i,input[value='charge']:checked+i{
                background: #2eda97;
              }

              input[value='charge']+i,input[value='free']+i{
                background: rgba($color: #000000, $alpha: 0.3);
              }



            }
          }

          &.descTitle {
            height: 50px;
          }

          .red {
            color: #2eda97;
            margin-left: 8px;
          }

          &.type {
            @include flexbox();

            &>span {
              margin-right: 10px;
            }

            label {
              @include flex();
              @include flexbox();

              input[type='radio'] {
                opacity: 0;
                position: absolute;
              }

              input[type='radio']+i {
                display: inline-block;
                margin: auto 0;
                width: 15px;
                height: 19px;
                background: url(image/icon_agree_normal.png) no-repeat center;
                background-size: 15px;
              }

              input[type='radio']:checked+i {
                background: url(image/icon_agree_click.png) no-repeat center;
                background-size: 15px;
              }

              span {
                margin-top: 1px;
                margin-left: 6px;
              }
            }
          }

          &.finish {
            display: block;
            width: 194px;
            height: 35px;
            color: #fff;
            padding: 0;
            text-align: center;
            margin: 40px auto;
            border-radius: 20px;
            line-height: 35px;
            background: #e5322d;
          }

          label {
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
          }

          .input {
            @include flex();
            border: none;
            padding-left: 5px;
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
          }

          &.liveType input[type='text'] {
            border: 1px solid rgba(156, 156, 156, 1);
            width: 154px;
            height: 35px;
            line-height: 35px;
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
            margin: 20px auto;
            text-align: center;
            border-radius: 6px;
          }

          input::-webkit-input-placeholder {
            color: rgba(156, 156, 156, 1);
            font-size: 15px;
          }

          input:-moz-placeholder {
            font-size: 15px;
            color: rgba(156, 156, 156, 1);
          }

          &.uploadImg {
            @include justify-content(space-between);
            padding-right: 9px;
            padding-left: 5px;

            img {
              width: 50px !important;
              height: 50px !important;
            }

            .img {
              position: relative;
              width: 50px;
              height: 50px;

              img.delIcon {
                position: absolute;
                right: -8px;
                top: -8px;
                width: 16px !important;
                height: 16px !important;
              }

            }

            .upfileDiv {
              position: relative;

              input[type=file] {
                position: absolute;
                opacity: 0;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
              }

              i.avatar-uploader-icon {
                display: inline-block;
                background: url(image/add_images.png);
                width: 50px;
                height: 50px;
                background-size: 50px;
              }

              span {
                display: block;
                font-size: 13px;
                color: rgba(156, 156, 156, 1);
              }
            }

          }

          span {
            i {
              color: rgba(156, 156, 156, 1);
            }
          }
        }
      }

    }
  }

}
